import React, { useState } from "react";
import { Layout, Input, Select, Card,Pagination } from "antd";
import JobData from "./jobData"; // 包含找工作信息的数据文件

const { Content } = Layout;
const { Option } = Select;
const { Search } = Input;

const JobPage = () => {
  const [searchValue, setSearchValue] = useState("");
  const [filterValue, setFilterValue] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 6; // 每页显示的卡片数量

  const handleSearch = (value) => {
    setSearchValue(value);
    setCurrentPage(1);
  };

  const handleFilterChange = (value) => {
    setFilterValue(value);
    setCurrentPage(1);
  };

  // 根据搜索和筛选值过滤找工作信息数据
  const filteredJobs = JobData.filter(
    (job) =>
      job.title.includes(searchValue) &&
      (filterValue === "" || job.location.includes(filterValue))
  );
  // 根据当前页码和每页显示的数量计算应该显示的卡片
  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = currentPage * pageSize;
  const currentJobs = filteredJobs.slice(startIndex, endIndex);

  // 总页数
  const totalPage = Math.ceil(filteredJobs.length / pageSize);

  const onPageChange = (page) => {
    setCurrentPage(page);
  };


  return (
    <div>
      <Search
        placeholder="搜索工作"
        allowClear
        enterButton="搜索"
        size="large"
        onSearch={handleSearch}
        style={{ marginTop: 20 }}
      />
      <Select
        defaultValue=""
        style={{ width: 200, marginTop: 20 }}
        onChange={handleFilterChange}
        placeholder="按地区筛选"
      >
        <Option value="">全部地区</Option>
        <Option value="深圳">深圳</Option>
        <Option value="福州">福州</Option>
        <Option value="上海">上海</Option>
        <Option value="宁波">宁波</Option>
        <Option value="西安">西安</Option>
        <Option value="厦门">厦门</Option>
        {/* 根据实际情况添加更多选项 */}
      </Select>

      <Content style={{ padding: "0 10px", marginTop: 24 }}>
        <div style={{ background: "#fff", minHeight: 280 }}>
          <div
            style={{
              display: "flex",
              flexWrap: "wrap",
              justifyContent: "space-between",
            }}
          >
            {currentJobs.map((job, index) => (
              <Card
                key={index}
                title={job.title}
                style={{ width: 400, marginBottom: 16 }}
              >
                <p>薪资: {job.salary}</p>
                <p>工作经验要求: {job.experience}</p>
                <p>地区: {job.location}</p>
                {/* 根据需要添加更多工作信息 */}
              </Card>
            ))}
          </div>
        </div>
        <Pagination
          current={currentPage}
          pageSize={pageSize}
          total={filteredJobs.length}
          onChange={onPageChange}
          style={{ marginTop: 20, textAlign: "center" }}
        />
      </Content>
    </div>
  );
};

export default JobPage;
